<section class="relative pt-40 pb-24 bg-gradient-to-b from-gray-50 to-white">
    <div class="absolute top-0 left-0 w-full h-60 overflow-hidden">
        <img src="https://blog.sblt.deali.cn:9000/Api/PicLib/Random/{{ request.user.username }}/1440/240" alt="cover-image"
             class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-700 ease-in-out opacity-90">
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-50/80"></div>
    </div>
    <div class="w-full max-w-7xl mx-auto px-6 md:px-8">
        <div class="flex items-center justify-center sm:justify-start relative z-10 mb-5">
            <div class="relative group">
                <div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition duration-500 blur"></div>
                <img src="https://blog.sblt.deali.cn:9000/Api/PicLib/Random/{{ request.user.username }}/150/150" alt="user-avatar-image"
                     class="relative border-4 border-solid border-white rounded-full shadow-xl transform hover:scale-105 transition-all duration-500 ease-in-out">
            </div>
        </div>
        <div class="flex flex-col sm:flex-row max-sm:gap-5 items-center justify-between mb-5 px-6 py-4 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
            <div class="block space-y-2">
                <div class="flex items-center gap-4 mb-3">
                    <h3 class="font-bold text-3xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                        {{ request.user.username }}
                    </h3>
                    <div class="text-2xl">
                        {% if request.user.profile.gender == 'male' %}
                            <i class="fa-solid fa-mars text-blue-500"></i>
                        {% elif request.user.profile.gender == 'female' %}
                            <i class="fa-solid fa-venus text-pink-500"></i>
                        {% elif request.user.profile.gender == 'unknown' %}
                            <i class="fa-regular fa-circle-question text-gray-500"></i>
                        {% endif %}
                    </div>
                </div>

                {% if request.user.profile.full_name %}
                    <p class="font-normal text-base leading-7 text-gray-500">
                        <i class="fa-regular fa-id-card"></i>
                        {{ request.user.profile.full_name }}
                    </p>
                {% endif %}

                {% if request.user.profile.phone %}
                    <p class="font-normal text-base leading-7 text-gray-500">
                        <i class="fa-solid fa-mobile-screen me-1"></i>
                        {{ request.user.profile.phone }}
                    </p>
                {% endif %}
            </div>
            <div class="flex gap-4">
                <button class="rounded-xl px-6 py-3.5 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:from-blue-600 hover:to-purple-600 transition-all transform hover:scale-[1.02] shadow-md">
                    <i class="fa-solid fa-pen mr-2"></i>
                    编辑资料
                </button>
                <button class="rounded-xl px-6 py-3.5 border-2 border-blue-500 text-blue-500 font-semibold hover:bg-blue-50 transition-colors">
                    <i class="fa-solid fa-gear mr-2"></i>
                    个人设置
                </button>
            </div>
        </div>
        <div class="flex flex-col lg:flex-row max-lg:gap-5 items-center justify-between py-0.5">
            <div class="flex items-center gap-4">
                <a role="button" href="{% url 'account:profile' %}"
                   class="py-3.5 px-5 rounded-full bg-indigo-200/90 hover:bg-indigo-300 text-indigo-600 hover:text-indigo-800 font-semibold text-base leading-7 shadow-sm shadow-transparent transition-all duration-500 hover:shadow-gray-200">
                    修改资料
                </a>
                <button class="py-3.5 px-5 rounded-full bg-indigo-200/90 hover:bg-indigo-300 text-indigo-600 hover:text-indigo-800 font-semibold text-base leading-7 shadow-sm shadow-transparent transition-all duration-500 hover:shadow-gray-200">
                    个人设置
                </button>
            </div>
            <div class="flex flex-col md:flex-row items-center gap-6 ">
                <p class="flex items-center gap-2 font-medium text-lg leading-8 text-gray-400 ">
                    Skills
                    <i class="fa-regular fa-star"></i>
                </p>
                <ul class="flex items-center flex-wrap gap-3">
                    <li class="px-4 py-2 rounded-full bg-blue-50 text-blue-600 font-medium hover:bg-blue-100 transition-colors cursor-pointer">
                        <i class="fa-brands fa-html5 mr-2"></i>HTML
                    </li>
                    <li class="py-3.5 px-7 rounded-full bg-orange-50 font-semibold text-base leading-7 text-gray-700">
                        CSS
                    </li>
                    <li class="py-3.5 px-7 rounded-full bg-orange-50 font-semibold text-base leading-7 text-gray-700">
                        Dart
                    </li>
                    <li class="py-3.5 px-7 rounded-full bg-orange-50 font-semibold text-base leading-7 text-gray-700">
                        C++
                    </li>
                    <li class="py-3.5 px-7 rounded-full bg-orange-50 font-semibold text-base leading-7 text-gray-700">
                        UI Design
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>